<template>
  <!--Banner-->
  <div class="iBanner">
    <div class="ibanner_main">
      <!--导航-->
      <tmpHeader :index='3'/>
      <!--搜索框-->
      <div class="ibanner_header">
        <Button @click="addBanner" type="info">
          <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
        </Button>
        <div class="header_input">
          <span>
            <Icon type=" i-icon i-icon-shop_fill" size="24"/>
          </span>
          <Input v-model.trim="search" placeholder="输入名称进行检索" style="width: 200px" clearable/>
          <Button type="primary" @click="searchInput" icon="ios-search"></Button>
        </div>
        
      </div>
      <!--表格列表-->
      <div class="tabList">
        <Table stripe :columns="columnList" :data="tbleList"></Table>
      </div>
      <!-- 分页-->
      <div class="page">
          <Page :total="bannerSize" :current='pageNo' show-total show-elevator @on-change="pageChange"/>
      </div>
      <!-- banner新增弹窗 -->
      <Modal
          v-model="addModal"
          title="banner新增"
          :mask="false"
          width="530px"
          footer-hide
      >
          <add @showaddModal = 'showaddModal'/>
      </Modal>
      <!-- banner编辑弹窗 -->
      <Modal
          v-model="editModal"
          title="banner编辑"
          :mask="false"
          width="530px"
          footer-hide    
          z-index=1000             
      >
          <edit @showeditModal= 'showeditModal' ref="child1" />
      </Modal>
    </div>
  </div>
</template>

<script>
import tmpHeader from "@/pages/organizat/contentmen/tmpHeader";
import api from "@/api/commonApi";
import add from "./components/add";
import edit from "./components/edit";
export default {
  components: {
    add,
    edit,
    tmpHeader
  },
  data() {
    return {
      itemid: sessionStorage.getItem('itemid'),
      addModal: false,
      editModal: false,
      tbleList: [],
      search: "",
      arr: [],
      len: 10,
      id: sessionStorage.getItem("hospitalId"),
      bannerSize: 10,
      pageSize: 10,
      pageNo: 1,
      columnList: [
        {
          title:"排序",
          key:"sum",
          align:"center",
          width: 60,
          render: (h, params) => {
              let sum = (this.pageNo-1)*this.pageSize + params.index +1;
              return h("span", sum);
          }
        },
        {
          title:"banner名称",
          key:"bannerName",
          align:"center",
          width: 130,
        },
        {
          title:"略图",
          key:"imageUrl",
          align:"center",
          width: 100,
          render: (h, params) => {
            let avatar = params.row.imageUrl;
            let a = ''
            if(Boolean(avatar)) {
              a = h("img", {
                  attrs: {
                      src: avatar || '',
                      style:
                          "width:100%;height:100%;"
                  }
              })
            } else {
              a = h("span", {
                  attrs: {
                      style:'color:gray'
                  }
              },'暂无图片')
            }
            return a
        }
        },
        {
          title:"banner链接路径",
          // key:"imageUrl",
          key:"bannerUrl",
          align:"center",
        },
        {
          title:"显示配置",
          key:"type",
          align:"center",
          width: 100,
          render: (h,params) => {
            let type = params.row.type
            switch(type){
              case "0":
                  return "全部";
              case "1":
                  return "患者端";
              case "2":
                  return "医生端";
            }
          }
        },
        {
          title:"显示",
          key:"enable",
          align:"center",
          width: 80,
        },
        {
          title:"显示排序",
          key:"priority",
          align:"center",
          width: 100,
        },
        {
          title:"设置",
          align:"center",
          width: 100,
          render: (h,params) => {
            let row = params.row;
            return [
              h('span',{
                style: {
                    color: " #5362e1",
                    width: "60px"
                },
                on: {
                  click: () => {
                    this.editBanner(row)
                  }
                }
              },'编辑')
            ]
          }
        }
      ]
    };
  },
  created() {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/operation/mechanism/index",
        title: "机构运营"
      },
      {
        path: "/index/organizat/contentmen/banner/home",
        title: "机构配置管理"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  // 页面初始化获取数据
  mounted() {
    let pageNo = this.$route.params.pageNo;
    if (pageNo) {
      this.pageNo = parseInt(pageNo);
    }
    this.getData(this.pageNo);
  },
  methods: {
    //父组件关闭弹窗
    showeditModal(){
        this.editModal = false
        this.getData(this.pageNo)
    },
    showaddModal(){
        this.addModal = false
        this.getData(this.pageNo)
    },
    pageChange(index) {
      this.pageNo = index;
      if (this.search) {
        this.getData(1, this.search);
      } else {
        this.getData(index);
      }
    },
    searchInput() {
      this.pageNo = 1
      this.getData(1, this.search);
    },
    // 新增
    addBanner() {
      //functionJS公用跳转方法
      // this.functionJS.paramsNavgationTo(this, "bannerAdd", {
      //   pageNo: this.pageNo
      // });
      this.addModal = true
    },
    // 编辑
    editBanner(item) {
      this.$refs.child1.editBanner(item.id) 
      this.editModal = true
    },
    getData(pageNo, val) {
      let params = {
        bannerName: "",
        hospitalId: this.id,
        pageNo,
        pageSize: 10
      };
      if (Boolean(val)) {
        params.bannerName = val.trim();
      }
      this.$axios.post(api.bannerList, params).then(res => {
        if (res.data.success) {
          let ret = res.data.object;
          this.bannerSize = ret.total;
          if(ret.records){
             ret.records.forEach((item,index) => {
                item.sum = this.addZeros(index);
                item.imageUrl = this.analysisImages(item.imageUrl);
                item.enable = item.enable == 1 ? "是" :"否"
              })
              this.tbleList = ret.records;
          } else {
            this.tbleList = []
          }
        }
      });
    },
    analysisImages(json) {
      try {
        json = JSON.parse(json);
        return this.fileBaseUrl + json.fileName;
      } catch (error) {
        return "";
      }
    }
  },
};
</script>

<style lang="less" scoped >
.iBanner {
  width: calc(100%);
  padding: 10px 30px;
  margin: 0 auto;
  background: #fff;
  .ibanner_main {
    display: flex;
    flex-direction: column;
    .ibanner_header {
      width: 95%;
      margin: 10px auto;
      display: flex;
    }
    .tabList {
      width: 95%;
      margin: 20px auto;
    }
    .page{
      text-align: center;
    }
  }
}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>